/**
 * 日程管理 App 全局样式变量
 * 基于设计文档的色彩系统和字体系统
 */

/* ==================== 色彩系统 ==================== */

/* 主色调 */
$primary-blue: #3B82F6;
$primary-light-blue: #EBF5FF;

/* 功能色（紧急程度 / 状态色） */
$urgent-red: #EF4444;
$urgent-light-red: #FEE2E2;
$high-orange: #F59E0B;
$high-light-orange: #FEF3C7;
$medium-purple: #6366F1;
$medium-light-purple: #EEF2FF;
$low-gray: #6B7280;
$low-light-gray: #F3F4F6;
$complete-green: #10B981;

/* 浅色主题 */
$background-gray: #F9FAFB;
$card-white: #FFFFFF;
$text-dark-gray: #1F2937;
$text-light-gray: #6B7280;
$border-gray: #D1D5DB;
$shadow-gray: rgba(0, 0, 0, 0.05);

/* 深色主题 */
$dark-background: #0F172A;
$dark-card: #1E293B;
$dark-text-primary: #F1F5F9;
$dark-text-secondary: #94A3B8;
$dark-border: #334155;
$dark-shadow: rgba(0, 0, 0, 0.3);

/* ==================== CSS 变量定义 ==================== */

/* 默认为浅色主题 */
:root,
page {
	/* 基础色彩 */
	--primary-color: #{$primary-blue};
	--primary-light: #{$primary-light-blue};
	
	/* 背景色 */
	--bg-primary: #{$background-gray};
	--bg-secondary: #{$card-white};
	
	/* 文本色 */
	--text-primary: #{$text-dark-gray};
	--text-secondary: #{$text-light-gray};
	
	/* 边框色 */
	--border-color: #{$border-gray};
	
	/* 阴影 */
	--shadow-color: #{$shadow-gray};
	
	/* 功能色 */
	--urgent-color: #{$urgent-red};
	--urgent-light: #{$urgent-light-red};
	--high-color: #{$high-orange};
	--high-light: #{$high-light-orange};
	--medium-color: #{$medium-purple};
	--medium-light: #{$medium-light-purple};
	--low-color: #{$low-gray};
	--low-light: #{$low-light-gray};
	--success-color: #{$complete-green};
}

/* 深色主题 */
page[data-theme="dark"],
.theme-dark {
	/* 背景色 */
	--bg-primary: #{$dark-background};
	--bg-secondary: #{$dark-card};
	
	/* 文本色 */
	--text-primary: #{$dark-text-primary};
	--text-secondary: #{$dark-text-secondary};
	
	/* 边框色 */
	--border-color: #{$dark-border};
	
	/* 阴影 */
	--shadow-color: #{$dark-shadow};
	
	/* 深色主题下功能色稍作调整 */
	--urgent-light: #{lighten($urgent-red, 40%)};
	--high-light: #{lighten($high-orange, 40%)};
	--medium-light: #{lighten($medium-purple, 40%)};
	--low-light: #{lighten($low-gray, 30%)};
}

/* ==================== 字体系统 ==================== */

/* 字体家族 */
$font-family: 'Inter', system-ui, -apple-system, sans-serif;

/* 字体大小 */
$font-size-title-1: 18px; /* 1.125rem */
$font-size-title-2: 16px; /* 1rem */
$font-size-body: 14px; /* 0.875rem */
$font-size-caption: 12px; /* 0.75rem */

/* 字重 */
$font-weight-bold: 700;
$font-weight-semibold: 600;
$font-weight-normal: 400;

/* 行高 */
$line-height-title-1: 24px;
$line-height-title-2: 22px;
$line-height-body: 20px;
$line-height-caption: 16px;

/* ==================== 间距系统 ==================== */

$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-lg: 16px;
$spacing-xl: 20px;
$spacing-2xl: 24px;

/* ==================== 圆角系统 ==================== */

$border-radius-sm: 4px;
$border-radius-md: 8px;
$border-radius-lg: 12px;
$border-radius-xl: 16px;

/* ==================== 阴影系统 ==================== */

$shadow-sm: 0 2px 4px 0 $shadow-gray;
$shadow-md: 0 4px 6px 0 $shadow-gray;
$shadow-button: 0 2px 4px 0 rgba(59, 130, 246, 0.2);

/* ==================== 组件尺寸 ==================== */

/* 按钮 */
$button-height-primary: 44px;
$button-height-secondary: 32px;

/* 输入框 */
$input-height: 44px;

/* 导航栏 */
$navbar-height: 56px;
$tabbar-height: 64px;

/* 标签 */
$tag-height: 24px;

/* ==================== 通用样式类 ==================== */

/* 布局 */
.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex-start {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

/* 文字样式 */
.text-title-1 {
	font-size: $font-size-title-1;
	font-weight: $font-weight-semibold;
	line-height: $line-height-title-1;
	color: var(--text-primary);
}

.text-title-2 {
	font-size: $font-size-title-2;
	font-weight: $font-weight-semibold;
	line-height: $line-height-title-2;
	color: var(--text-primary);
}

.text-body {
	font-size: $font-size-body;
	font-weight: $font-weight-normal;
	line-height: $line-height-body;
	color: var(--text-primary);
}

.text-caption {
	font-size: $font-size-caption;
	font-weight: $font-weight-normal;
	line-height: $line-height-caption;
	color: var(--text-secondary);
}

/* 优先级颜色 */
.priority-urgent {
	color: $urgent-red;
	border-color: $urgent-red;
}

.priority-high {
	color: $high-orange;
	border-color: $high-orange;
}

.priority-medium {
	color: $medium-purple;
	border-color: $medium-purple;
}

.priority-low {
	color: $low-gray;
	border-color: $low-gray;
}

/* 卡片样式 */
.card {
	background-color: var(--bg-secondary);
	border-radius: $border-radius-md;
	box-shadow: 0 2px 4px 0 var(--shadow-color);
	padding: $spacing-lg;
	margin-bottom: $spacing-md;
}

/* 按钮样式 */
.btn-primary {
	height: $button-height-primary;
	background-color: var(--primary-color);
	color: var(--bg-secondary);
	border-radius: $border-radius-md;
	font-size: $font-size-title-2;
	font-weight: $font-weight-semibold;
	box-shadow: $shadow-button;
	border: none;
	
	&:active {
		transform: scale(0.95);
		transition: transform 0.1s;
	}
}

.btn-secondary {
	height: $button-height-secondary;
	background-color: var(--low-light);
	color: var(--text-secondary);
	border-radius: $border-radius-xl;
	font-size: $font-size-caption;
	font-weight: $font-weight-normal;
	border: none;
	padding: 0 $spacing-md;
	
	&.active {
		background-color: var(--primary-color);
		color: var(--bg-secondary);
	}
}

/* 输入框样式 */
.input {
	height: $input-height;
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: $border-radius-md;
	padding: 0 $spacing-lg;
	font-size: $font-size-body;
	color: var(--text-primary);
	
	&:focus {
		border-color: var(--primary-color);
		box-shadow: 0 0 0 2px var(--primary-light);
	}
	
	&::placeholder {
		color: var(--text-secondary);
	}
}
